<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
<<<<<<< HEAD
  <title>香蕉</title>
=======
  <title>苹果</title>
  <title>234</title>
>>>>>>> test
  <link rel="stylesheet" href="css/meizu6Plus.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="js/jquery.fullPage.css">
</head>

<body>

  <div id="meizuFixed">
    <section>
      <div></div>
      <div class="content">
        <span>探索 PRO 6 PLUS</span>
        <span></span>
        <span>立即购买</span>
      </div>
    </section>
  </div>
  <div id="full">
    <section class="section fp-auto-height wuSection">
      <header>
        <div class="meizuLogo"></div>
        <div class="shopList">
          <ul>
            <li>魅族商城</li>
            <li>魅族手机</li>
            <li>魅蓝手机</li>
            <li>魅族声学</li>
            <li>智能&nbsp;&middot;&nbsp;配件</li>
            <li>服务</li>
            <li>专卖店</li>
            <li>Flyme</li>
            <li>社区</li>
            <li class="userLi">
              <img src="img/log-default-avatar_a44f0e7.png" alt="">
              <img src="img/向下.png" alt="">
            </li>
          </ul>
        </div>
      </header>
    </section>
    <section class="section active" id="wufirstPage">
      <div id="content">
        <img class="absoluteImg" src="img/slogan-phone_83c4291.png" alt="">
        <img class="slogan-logo"
          src="//www3.res.meizu.com/static/cn/products/pro6plus/summary/images/slogan-logo_fdd55ef.png">
        <img class="bgimg" src="img/slogan-np_87141dc.jpg" alt="">
        <p>越强大 &nbsp;越冷静</p>
      </div>
    </section>
    <section class="section bin-section0" style="font-size:1.5rem">
      <div class="bin-desc">

        <h1 class="f1" style="font-weight:200">一眼便让你沉浸</h1>

        <p class="f2" style="font-weight:200;line-height:2rem;">我们擅长于制造惊喜。这块屏幕不只是参数党的狂欢，WQHD
          分辨率的彻底升级将在超高亮度、惊艳色彩、强对比度各方面捕获你的芳心。AOD 息屏显示技术，时间日期电量通知置于之上，PRO 6 Plus 将为你带来无限遐想。</p>
        <img class="bin-img" src='img/learn-more-black_b3bf3cd.png'>
      </div>
      <ul class="bin-ul">
        <li class="bin-item bin0">
          <h1 class="f11" style="font-weight:200">5.7</h1>
          <p>英寸</p>
          <div class="bin-gang"></div>
        </li>
        <li class="bin-item bin1">
          <h1 class="f11" style="font-weight:200">518</h1>
          <p>PPI</p>
          <div class="bin-gang"></div>
        </li>
        <li class="bin-item bin2">
          <h1 class="f11" style="font-weight:200">103%</h1>
          <p>NTSC色域</p>
          <div class="bin-gang"></div>
        </li>
        <li class="bin-item bin3">
          <h1 class="f11" style="font-weight:200">600cd/m²</h1>
          <p>峰值亮度</p>
        </li>
        <li class="bin-item bin4">
          <h1 class="f11" style="font-weight:200"> 10000:1</h1>
          <p>强对比度</p>
        </li>
        <li class="bin-item bin5">
          <h1 class="f11" style="font-weight:200"> 2560*1440</h1>
          <p>高分辨率</p>
        </li>
      </ul>
    </section>
    <section class="section" id="thirdPage">
      <div class="content">
        <div class="detail">
          <h1>让人上瘾的独特手感</h1>
          <p style="font-size: 13px;">刚柔并济，这是我们打动你的方式。精准的硬朗直角下，依旧掩盖不住 PRO 6 Plus 超凡脱俗的微弧设计。重新设计的机身曲线，30 道工序与 150
            小时的精雕细琢，造就了 PRO 6 Plus 独一无二的细节之美。CD 纹路摄像头、环形闪光灯、极简设计天线，PRO 6 Plus 不会让任何一个出色的细节从你手中溜走。</p>
        </div>
      </div>
    </section>
    <!--3  5-->
    <section style="font-size:1.5rem" class="section bin-section1">
      <div class="desc bin-hifi">
        <h1 class="f20" style="font-weight:200">全新一代 Hi-Fi 思路<br>静如处子，动如脱兔</h1>
        <p class="f16" style="font-weight:200; line-height:2rem; letter-spacing: 0.2rem;">在 ES9018K2M 的经典声音下，我们还采用定制化
          AD45275 的低功耗运放。XFCB 工艺使得 PRO 6 Plus 在超低功耗下也能有出色的音频表现。依靠 180MHz 增益带宽和 225V/us 压摆率的出色硬件指标加持，PRO 6 Plus
          带来了速度与密度俱佳的声音质感，更让 PRO 6 Plus 成为了老烧们眼中爱不释手的玩物。</p>
      </div>
    </section>
    <!--4  6-->
    <section style="font-size:1.5rem" class="section bin-section2">
      <div class="bin-m3d">
        <h1 class="f30" style="font-weight:200">3D Press，传承与变革</h1>
        <p class="f17" style="font-weight:200">优秀的传统必须坚持，所以我们保留了为大家乐道的 3D
          Press——通过按压呼出对应预览结果及手机热键功能。精良的品质需要推敲，所以我们革新并加成了线性重力校准——不惜用双倍时间成本打磨至臻。方寸之间，尽显大观。</p>
      </div>
    </section>
    <section class="section" id="forthPage">
      <div class="cpu">
        <h1 style="font-weight:200">高山仰止，Exynos 8 登场</h1>
        <p style="font-size: 13px;" style="font-weight:200">峰值频率高达 2.6GHz 的「猫鼬」核心，高效的 SCI 三星互联架构，超越想象的 12 核 GPU，被第二代
          14nm FinFET 工艺整合在一颗璀璨夺目的旗舰芯片中。这是魅族手机有史以来的最强大脑；面对各种大型游戏和苛刻应用，也是手到擒来。</p>
        <img src="//www3.res.meizu.com/static/cn/products/pro6plus/summary/images/learn-more-white_61577f1.png">
        <!--<a href="performance.html" class="learn-more">-->
        <!--<img src="//www3.res.meizu.com/static/cn/products/pro6plus/summary/images/learn-more-white_61577f1.png">-->
        <!--</a>-->
      </div>
    </section>
    <section class="section" id="fifthPage">
      <div class="camera">
        <img src="img/camera-phone_6517ad6.png" alt="">
        <div class="inner">

          <h1 style="font-size: 29px;" style="font-weight:200">快，准，稳<br>轻松达成高赞照片</h1>
          <p style="font-size: 13px;">有别以往，全新 CD 纹工艺将让相机与手机一样备受瞩目。四轴光学防抖搭配 ƒ/2.0 大光圈及 6P 镜头，即使身处夜景 PRO 6 Plus
            也美不胜收。新一代高性能 ISP 图像处理器还大幅提升了色彩、锐度及降噪表现，拍下照片或是视频，都经得起细看。</p>
          <ul class="items camera-items">
            <li class="item">
              <h2 class="item-detail item-detail-1" style="font-size: 24px;" style="font-weight:200">
                1200 万
              </h2>
              <p class="item-detail item-detail-1" style="font-size: 13px;" style="font-weight:200">有效像素</p>
              <div class="item-detail item-detail-2 divide-line"></div>
            </li>
            <li class="item">
              <h2 class="item-detail item-detail-1" style="font-size: 24px;" style="font-weight:200">
                IMX386 CMOS
              </h2>
              <p class="item-detail item-detail-1" style="font-size: 13px;" style="font-weight:200">索尼定制</p>
              <div class="item-detail item-detail-2 divide-line"></div>
            </li>
            <li class="item">
              <h2 class="item-detail item-detail-1" style="font-size: 24px;" style="font-weight:200">
                1.25μm
              </h2>
              <p class="item-detail item-detail-1" style="font-size: 13px;" style="font-weight:200">单像素面积</p>
            </li>
            <li class="item">
              <h2 class="item-detail item-detail-1" style="font-size: 24px;" style="font-weight:200">
                10-LED
              </h2>
              <p class="item-detail item-detail-1" style="font-size: 13px;" style="font-weight:200">环形闪光灯</p>
            </li>
          </ul>
          <div>
            <img class="iconAdd" src="img/learn-more-black_b3bf3cd.png" alt="">
          </div>
        </div>
      </div>
    </section>
    <section class="section" id="sixthPage">
      <div class="inner">
        <div class="content">
          <h1 class="f42" style="font-size: 36px;">让指纹更安全</h1>
          <p style="font-size: 13px;">
            不断优化指纹支付的识别速度及识别率已然成为我们前进的惯性。同时，在保证内置芯片可靠性的基础上，我们用特殊的封装技术与工艺保留了光路。不仅能在任意方向有效识别指纹，基于 Live Finger Detection™
            的活体检测技术更能实现对真假手指的判定。</p>
          <div class="mtouch-graph">
            <img src="img/mtouch-finger_fa3273f.png">
          </div>
          <div class="mtouch-sub-desc">
            <p class="f25" style="font-size: 21px;font-weight:200;">Live Finger Detection™</p>
            <span class="f14" style="font-size: 13px; ">活体检测技术</span>
          </div>
        </div>
        <img class="mtouch1" src="img/mtouch-1_b07bf1f.png" alt="">
        <img class="mtouch2" src="img/mtouch-2_4dc3b73.png" alt="">
        <img class="mtouch3" src="img/mtouch-3_2b88fc7.png" alt="">
        <img class="mtouch4" src="img/mtouch-4_6d51cc3.png" alt="">
        <img class="mtouch5" src="img/mtouch-5_d9c6190.png" alt="">
        <img class="mtouch6" src="img/mtouch-6_7d944e3.png" alt="">
        <img class="mtouch7" src="img/mtouch-7_944dbc1.png" alt="">
      </div>
    </section>
    <section style="font-size:1.5rem" class="section bin-section3">
      <div class="bin-typec">
        <h1 style="font-weight:200" class="f40">Type-C + USB 3.1</h1>
        <p style="font-weight:200" class="f18">PRO 6 Plus 融合 USB 标准新一代技术：Type-C、USB 3.1。从此 USB 端口不再区分正反，更支持 5Gbps
          传输带宽，1G 数据，十秒传完。数据线也经过重新设计，最高支持 60W 充电；新加入高温、短路主动保护装置，更耐用、更安全。</p>
      </div>
    </section>
    <section style="font-size:1.5rem" class="section bin-section4">
      <div class="bin-battery">
        <h1 style="font-weight:200" class="f50">2 倍寿命电池，3 年无忧</h1>
        <p style="font-weight:200;line-height:1.5rem;" class="f19">我们深知用户对电池损耗的担忧，为此选用价格更高的 3400mAh 新型快充电池。900
          次循环寿命，约为普通电池 2 倍以上；大数据仿真测试表明：日常使用，3 年无忧。对于成本的毫不吝惜，造就惊喜的电池寿命。</p>
      </div>
    </section>
    <div class="section bin-section5 fp-auto-height" id='bin-section5'>
      <div class="bin-tiyan" id="bin-tiyan">
        <div class="bin-liaojie">
          <p class="bin-jixu">继续了解</p>
          <p class="bin-next">PRO 6Plus &nbsp;&bull;&nbsp; 体验</p>
        </div>
      </div>
      <div class="bin-zhu">
        <div class="bin-wrapper">
          <span class="bin-label" style='font-size:0.8rem;color:#d3d3e0; '>注：</span>
          <ul>
            <li>
              1.
              本网站里所呈现的配图素材、产品型号、测试数据、功能性能、规格参数等仅供参考，魅族有可能对上述内容进行改进，所有的具体信息请参照产品实物、产品说明书。除非经特殊标注说明，本网站中所涉及的任何数据均为魅族实验室内部测试结果，在不同的客观环境下，数据会有不同程度的误差，请以实机体验为准。
            </li>
            <li>
              2.「普通电池」指代魅族此前使用的方案。
            </li>
            <li>
              3.「有史以来的最强大脑」指代2016年11月30日前魅族自有系列产品。
            </li>
          </ul>
        </div>
      </div>

      <div class="bin-foot">
        <div class="bin-col3">
          <ul>
            <li>
              <p>魅族商城</p>
            </li>
            <li><a target="_blank" href="#">魅蓝 Note5</a></li>
            <li><a target="_blank" href="#">PRO 6 Plus</a></li>
            <li><a target="_blank" href="#">魅蓝 X</a></li>
            <li><a target="_blank" href="#">魅蓝 5</a></li>
          </ul>
        </div>
        <div class="bin-col3">
          <ul>
            <li>
              <p>服务支持</p>
            </li>
            <li><a target="_blank" href="#">寄送快修</a></li>
            <li><a target="_blank" href="#">上门快修</a></li>
            <li><a target="_blank" href="#">预约维修</a></li>
            <li><a target="_blank" href="#">VIP注册</a></li>
          </ul>
        </div>
        <div class="bin-col3">
          <ul>
            <li>
              <p>Flyme</p>
            </li>
            <li><a target="_blank" href="#">系统下载</a></li>
            <li><a target="_blank" href="#">开放平台</a></li>
            <li><a target="_blank" href="#">软件商店</a></li>
            <li><a target="_blank" href="#">查找手机</a></li>
          </ul>
        </div>
        <div class="bin-col3">
          <ul>
            <li>
              <p>关于我们</p>
            </li>
            <li><a target="_blank" href="#">关于魅族</a></li>
            <li><a target="_blank" href="#">加入我们</a></li>
            <li><a target="_blank" href="#">联系我们</a></li>
            <li><a target="_blank" href="#">意见反馈</a></li>
          </ul>
        </div>
        <div class="bin-col3"></div>
        <div class="bin-phone">
          <p>24小时全国服务热线</p>
          <p>400-788-3333</p>
          <div class="bin-kefu">
            <span>24小时在线服务</span>
          </div>
        </div>
      </div>

      <div class="bin-end">
        <div class="bin-falv">
          <p>粤ICP备13003602号-2 粤B2-20130198 营业执照 法律声明 粤公网安备 44049102496009 号 Select Region</p>
          <p>珠海市魅族通讯设备有限公司 地址：广东省珠海市唐家湾科技创新海岸魅族科技楼 电话：0756-6130440 </p>
          <p>©2017 Meizu Telecom Equipment Co., Ltd. All rights reserved.</p>
        </div>
        <a href="#">关注我们</a>
      </div>
    </div>

</body>

</html>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script>

  /**
   * 结尾的动画
   */
  var bg = document.createElement('div')
  bg.setAttribute("id", "yourdiv")
  var sec = document.getElementById('bin-section5')

  bg.style.backgroundColor = 'gray';
  bg.style.width = '100%';
  bg.style.height = '100%';
  bg.style.top = '0';
  bg.style.left = '0';
  bg.style.position = 'absolute';
  // bg.style.zIndex = '100'
  bg.style.background = 'rgba(0,0,0,.4)'
  /*加图片*/
  var div = document.createElement('div')
  bg.appendChild(div)
  div.setAttribute("id", "yourimg")

  div.style.backgroundImage = 'url(img/footer-performance_333b872.jpg)'
  div.style.height = '20%'
  div.style.width = '100%';
  div.style.opacity = '0';
  div.style.cursor = 'pointer'

  var fdiv = document.createElement('div')
  var pf = document.createElement('p')
  var ps = document.createElement('p')
  div.appendChild(fdiv)
  fdiv.appendChild(pf)
  fdiv.appendChild(ps)
  fdiv.setAttribute("id", "fdiv")
  pf.setAttribute("id", "pf")
  ps.setAttribute("id", "ps")
  pf.innerHTML = '继续了解'
  ps.innerHTML = 'PRO 6Plus &nbsp;&bull;&nbsp; 体验'

  // img.style.zIndex = '200'
  div.style.opacity = '0.6';

  $('.bin-tiyan').mouseenter(function () {
    sec.appendChild(bg)

    $('#yourimg').animate({top: '-10%', height: '60%', opacity: '1'}, {
      easing: 'easeOutBounce',
      duration: 1500
    });

    $('#yourimg').mouseleave(function (event) {
      $('#yourimg').animate({top: '10%', height: '20%', opacity: '0'}, 300, function () {
        $('#yourdiv').remove();
      })
    })
  })



  var indexTime;
  var nextTime;
  var a = $('#full').fullpage({
    easing: 'easeInOutElastic',
    navigation: true,

    /*导航小圆点位置，可以设置为left或者right*/
    navigationPosition: 'left',
    scrollingSpeed: 1500,
    navigation: true,
    css3: true,
    //        normalScrollElements: '#full #fifthPage',
    //        normalScrollElements: '',
    onLeave: function (index, nextindex, direction) {
      nextTime = new Date().getTime();
      if (nextTime - indexTime < 1000) {
        //                moveTo(index);
        //                return;
      }
      /**
       * 翻屏动画控制
       */
      if (direction == 'down' && index != 1 && index != 11) {

        $('#full>section:nth-of-type(' + index + ')').addClass('transformDown').height('50%')
        setTimeout(function () {
          $('#full>section:nth-of-type(' + index + ')').removeClass('transformDown')
        }, 1500)
      }
      else if (direction == 'up' && index < 12 && index > 2) {
        $('#full').css({perspective: '800px'})
        $('#full>section:nth-of-type(' + index + ')').addClass('transformUp');
        setTimeout(function () {
          $('#full>section:nth-of-type(' + index + ')').removeClass('transformUp');
          $('#full').css({perspective: '10000px'})
        }, 1500)
      }
      if (nextindex == 3) {
        $('.bin-section0').removeClass('bin-back2')
        $('.f1').removeClass('bin-translate').css('opacity', '0')
        $('.f2').removeClass('bin-translate').css('opacity', '0')
        $('.bin-img').removeClass('bin-translate').css('opacity', '0')
        $('.bin0').removeClass('bin-translate1').css('opacity', '0')
        $('.bin1').removeClass('bin-translate1').css('opacity', '0')
        $('.bin2').removeClass('bin-translate1').css('opacity', '0')
        $('.bin3').removeClass('bin-translate1').css('opacity', '0')
        $('.bin4').removeClass('bin-translate1').css('opacity', '0')
        $('.bin5').removeClass('bin-translate1').css('opacity', '0')
      }
      else if (index == 1) {
        $('#meizuFixed').animate({top: -100}, 1000)
      }

      else if (index == 3 && direction == 'up') {
        $('#wufirstPage .slogan-logo').css({opacity: 0})
        $('#wufirstPage p').css({opacity: 0})
        $('#content .absoluteImg').css({opacity: '0', left: '80%'})
        $("#content .bgimg").css({opacity: 0})
      }

      else if (nextindex == 1) {
        //                控制小导航栏状态
        $('#meizuFixed').animate({top: 100}, 1000)
      }
      else if (nextindex == 4) {
        $('#thirdPage .content .detail h1').removeClass('h1AnimateUp').css({opacity: 0});
        $('#thirdPage .content .detail p').removeClass('pAnimateUP').css({opacity: 0});

      }
      else if (nextindex == 5) {
        $('.f16').removeClass('bin-translate').css('opacity', '0')
        $('.f20').removeClass('bin-translate').css('opacity', '0')
      }
      else if (nextindex == 6) {
        $('.f17').removeClass('bin-translate').css('opacity', '0')
        $('.f30').removeClass('bin-translate').css('opacity', '0')
      }
      else if (nextindex == 7) {
        $('#forthPage .cpu h1').removeClass('h1AnimateUp').css({opacity: 0});
        $('#forthPage .cpu p').removeClass('pAnimateUP').css({opacity: 0});
        $('.cpu img').removeClass('pAnimateUP').css({opacity: 0});
      }
      else if (nextindex == 8) {
        $('#fifthPage .camera .inner>h1').removeClass('cameraUp').css({opacity: 0});
        $('#fifthPage .camera .inner>*').not('ul').removeClass('cameraUp').css({opacity: 0})
        $('#fifthPage ul li').removeClass('cameraUp').css({opacity: 0})
      }
      else if (nextindex == 9) {

        var startArray = ['20%', '25%', '30%', '28%', '35%', '40%', '45%'];
        $('#sixthPage .inner .content>*').each(function (index, element) {
          $(this).removeClass('cameraUp').css({opacity: 0});
        })
        $('#sixthPage .inner>img').each(function (index, element) {
          $(this).css({bottom: startArray[6 - index]})
        })

      }
      else if (nextindex == 10) {
        $('.f18').removeClass('bin-translate').css('opacity', '0')
        $('.f40').removeClass('bin-translate').css('opacity', '0')
      }


      else if (nextindex == 11) {
        $('.f19').css('opacity', '0').removeClass('bin-translate')
        $('.f50').css('opacity', '0').removeClass('bin-translate')
      }
    },
    afterLoad: function (anchorLink, index) {
      $(this)[0].onmousewheel = function (ev) {
        ev.preventDefault()
        console.log(ev);
      }
      indexTime = new Date().getTime();
      if (index == 2) {
        //                $.fn.fullpage().setAllowScrolling(false,['down'])
        //                window.onmousewheel = function (ev) {
        //                    console.log(ev);
        //                }

        $('#meizuFixed').animate({top: -100}, 1000)
        setTimeout(function () {
          $('#wufirstPage .slogan-logo').animate({opacity: 1}, 1500)  //第一屏pro6 logo
        }, 500)

        setTimeout(function () {
          $('#wufirstPage p').animate({opacity: 1}, 1500)     //第一屏字体
        }, 1500);

        setTimeout(function () {
          //                    第一屏背景
          $('#content .bgimg').animate({opacity: 1}, 1500)
        }, 2000)
        setTimeout(function () {
          //                    第一屏小手机
          $('#wufirstPage>div .absoluteImg').animate({left: '50%', opacity: 1},
            {
              easing: 'easeOutBounce',
              duration: 2500,
            })
        }, 2500)
      }
      if (index == 3) {
        setTimeout(function () {
          $('.f1').animate({opacity: '1'}, 1000)
          $('.f1').addClass('bin-translate')
        }, 3000)

        setTimeout(function () {
          $('.f2').animate({opacity: '1'}, 000)
          $('.f2').addClass('bin-translate')
        }, 4000)

        setTimeout(function () {
          $('.bin-img').animate({
            opacity: '1'
          },
            1000)
          $('.bin-img').addClass('bin-translate')
        }, 4500)

        setTimeout(function () {
          $('.bin0').animate({
            opacity: '1'
          },
            1000)
          $('.bin0').addClass('bin-translate1')
        }, 5000)

        setTimeout(function () {
          $('.bin1').animate({
            opacity: '1'
          },
            1000)
          $('.bin1').addClass('bin-translate1')
        }, 5300)

        setTimeout(function () {
          $('.bin2').animate({
            opacity: '1'
          },
            1000)
          $('.bin2').addClass('bin-translate1')
        }, 5600)

        setTimeout(function () {
          $('.bin3').animate({
            opacity: '1'
          },
            1000)
          $('.bin3').addClass('bin-translate1')
        }, 5900)

        setTimeout(function () {
          $('.bin4').animate({
            opacity: '1'
          },
            1000)
          $('.bin4').addClass('bin-translate1')
        }, 6200)

        setTimeout(function () {
          $('.bin5').animate({
            opacity: '1'
          },
            1000)
          $('.bin5').addClass('bin-translate1')
        }, 6500)

        setTimeout(function () {
          $('.bin-section0').addClass('bin-back1')
        }, 1000)
        setTimeout(function () {
          $('.bin-section0').removeClass('bin-back1').addClass('bin-back2')
        }, 2000)
      }
      else if (index == 4) {
        //第三屏h1
        $('#thirdPage .content .detail h1').addClass('h1AnimateUp');
        $('#thirdPage .content .detail h1').animate({opacity: 1}, 500);
        setTimeout(function () {
          //                    第三屏h1
          $('#thirdPage .content .detail p').addClass('pAnimateUP');
          $('#thirdPage .content .detail p').animate({opacity: 1}, 500);
        }, 500)
        setTimeout(function () {
          //                    $('#thirdPage .content .detail h1').removeClass('h1AnimateUp');
        }, 2000)
      }
      else if (index == 5) {
        setTimeout(function () {
          $('.f20').animate({
            opacity: '1'
          },
            1000)
          $('.f20').addClass('bin-translate')
        }, 200)

        setTimeout(function () {
          $('.f16').animate({
            opacity: '1'
          },
            1000)
          $('.f16').addClass('bin-translate')
        }, 1500)

      }
      else if (index == 6) {
        setTimeout(function () {
          $('.f30').animate({
            opacity: '1'
          },
            1000)
          $('.f30').addClass('bin-translate')
        }, 200)

        setTimeout(function () {
          $('.f17').animate({
            opacity: '1'
          },
            1000)
          $('.f17').addClass('bin-translate')
        }, 1000)
      }
      else if (index == 7) {
        $('#forthPage .cpu h1').addClass('h1AnimateUp').animate({opacity: 1}, 500);
        setTimeout(function () {
          $('#forthPage .cpu p').addClass('pAnimateUP').animate({opacity: 1}, 500);
          $('.cpu img').addClass('pAnimateUP').animate({opacity: 1}, 500);
        }, 1000)
      }
      else if (index == 8) {

        $('#fifthPage .camera .inner>h1').addClass('cameraUp').animate({opacity: 1}, 500)
        setTimeout(function () {
          $('#fifthPage .camera .inner>p').addClass('cameraUp').animate({opacity: 1}, 500)
        }, 1200)

        setTimeout(function () {
          var time = 0;
          $('#fifthPage ul li').each(function (index, element) {
            time += 300;
            console.log($(this));
            setTimeout(function () {
              $(this).addClass('cameraUp').animate({opacity: 1}, 500)
            }.bind(this), time);
          })
        }, 1500)
        setTimeout(function () {
          $('#fifthPage .camera>.inner>div').addClass('cameraUp').animate({opacity: 1}, 500)
        }, 3000)
      }
      else if (index == 9) {
        var bottomArray = ['25%', '35%', '45%', '44%', '57%', '65%', '75%'];
        var time = 0;
        $('#sixthPage .inner .content>*').each(function (index, element) {
          time += 500;
          setTimeout(function () {
            $(this).addClass('cameraUp').animate({opacity: "1"}, 500);
          }.bind(this), time)
        })
        $('#sixthPage .inner>img').each(function (index, element) {
          $(this).animate({bottom: bottomArray[6 - index]}, {
            easing: 'easeInElastic',
            duration: 2500,
          })
        })
      }
      else if (index == 10) {
        setTimeout(function () {
          $('.f40').animate({
            opacity: '1'
          },
            1000)
          $('.f40').addClass('bin-translate')
        }, 200)

        setTimeout(function () {
          $('.f18').animate({
            opacity: '1'
          },
            1000)
          $('.f18').addClass('bin-translate')
        }, 1000)
      }

      // 第六屏
      else if (index == 11) {
        setTimeout(function () {
          $('.f50').animate({
            opacity: '1'
          },
            1000)
          $('.f50').addClass('bin-translate')
        }, 200)

        setTimeout(function () {
          $('.f19').animate({
            opacity: '1'
          },
            1000)
          $('.f19').addClass('bin-translate')
        }, 1000)
      }
    }
  })


  function opacity(index) {
    index.css({opacity: 0})
  }
</script>